<script setup lang="ts">
import {ref, watch} from 'vue'

const showModel = defineModel('open', {type: Boolean, default: false});
const props = defineProps({
  orderData: {
    type: Object,
    default: () => ({}),
  },
  source: {
    type: String,
    default: () => ('todo'),
  }
})
const confirmLoading = ref<boolean>(false);
const saveLoading = ref<boolean>(false);
const spinningLoading = ref<boolean>(false);
//监听模态框状态
watch(showModel, (newValue: boolean) => {
  if (newValue) {
    handleOpen()
  } else {
    closeModal()
  }
}, {deep: true})

const handelSubmitSave = () => {
  confirmLoading.value = true;
  console.log("提交数据");
}
const handleOpen = () => {
  spinningLoading.value = true;
  console.log("打开模态框")
  spinningLoading.value = false;
}
const closeModal = () => {
  console.log("关闭模态框")
  confirmLoading.value = false;
}

</script>
<template>
  <a-modal
      v-model:open="showModel"
      :title="`${source=='todo'?'办理':'修改'} - ${props.orderData?.order_sn}`"
      width="100vw"
      wrap-class-name="full-modal"
      :keyboard="false">
    <a-spin :spinning="spinningLoading" tip="数据加载中...">
      <div class="data-form">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </a-spin>
    <template #footer>
      <a-space>
        <a-button @click="()=>(showModel=false)">取消</a-button>
        <a-button v-if="source=='todo'" type="primary" danger :loading="saveLoading" @click="handelSubmitSave">提交保存</a-button>
        <a-button type="primary" :loading="confirmLoading" @click="handelSubmitSave">提交完成</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0 0 8px 8px;
    padding: 0; //20 24
    .ant-modal-header {
      border-bottom: 1px solid rgba(5, 5, 5, 0.06);
      padding: 8px 24px;
      margin-bottom: unset;
    }

    .ant-modal-close {
      top: 8px;
    }

    .ant-modal-body {
      flex: 1;
      padding: 6px 24px 10px 24px;
    }

    .ant-modal-footer {
      padding: 10px 24px;
      background: #f4f8fa;
    }
  }

}
</style>